<!-- 登录组件 -->
<template>
    <!-- 登录组件内容 -->
    <div id="login_container">
        <!-- 组件内登录框 -->
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avator_box">
                <img src="../assets/image/avator.jpg" alt="">
            </div>
            <!-- 表单区域 -->
            <el-form :model="loginData" :rules="rules" ref="ruleForm" class="login-ruleForm">
                <el-form-item prop="username">
                    <el-input v-model="loginData.username" placeholder="请输入用户名" prefix-icon="iconfont icon-user">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginData.password" type="password" placeholder="请输入密码"
                        prefix-icon="iconfont icon-password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click ="submitForm">登录</el-button>
                    <el-button type="infor" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginData: {
                    username: 'admin',
                    password: '123456'
                },
                //验证规则
                rules: {
                    username: [{
                            require: true,
                            message: "用户名不能为空",
                            tirgger: "blur"
                        },
                        {
                            min: 3,
                            max: 10,
                            message: "用户名长度必须在3到10之间",
                            tirgger: "blur"
                        }
                    ],
                    password: [{
                            require: true,
                            message: "密码不能为空",
                            tirgger: "blur"
                        },
                        {
                            min: 6,
                            max: 18,
                            tirgger: 'blur',
                            message: "密码长度必须在6到18之间"
                        }
                    ],
                }
            }
        },
        methods: {
            submitForm() {
                //验证成功提交表单
                console.log(this.loginData)
                this.$refs['ruleForm'].validate(async valid => {
                    if (!valid) return
                    //结构赋值，将处理后端返回结果赋值到res
                    const {data: res} = await this.$http.post('/login', this.loginData)
                    if (res.meta.status !== 200) return this.$message.error('用户名或密码错误')
                    this.$message({
                        showClose: true,
                        message: '登录成功',
                        type: 'success'
                    })
                    console.log(res)
                    window.sessionStorage.setItem('token',res.data.token)
                    this.$router.push('/home')
                })
            },
            resetForm() {
                // this.loginData = {
                //     name: '',
                //     password: ''
                // }
                //可以使用resetFields重置表单
                this.$refs.ruleForm.resetFields()
            }
        }
    }
</script>
<style scoped>
    /* @import url(); 引入css类 */
    /* 注册组件css */
    #login_container {
        position: relative;
        height: 100%;
        background-color: #2b4b;
    }

    /* 登录框css */
    .login_box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 300px;
        width: 450px;
        background-color: #fff;
        border-radius: 5px;
    }

    /* 头像框css */
    .login_box .avator_box {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 130px;
        height: 130px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 75px;
        overflow: hidden;
        background-color: #fff;
    }

    .login_box .avator_box img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }

    /* 表单区域css */
    .login_box .login-ruleForm {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 20px;
    }

    .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>